<template>
  <div class="page-header-index-wide">
    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <!--<div class="extra-wrapper" slot="tabBarExtraContent">
            <div class="extra-item">
              <a @click="searchData(1)"><badge v-show="weekSearchFlag" text="本周" status="success"/><span v-show="!weekSearchFlag">本周</span></a>
              <a @click="searchData(2)"><badge v-show="monthSearchFlag" text="本月" status="success"/><span v-show="!monthSearchFlag">本月</span></a>
            </div>
            <a-range-picker v-model="dateRange" :style="{width: '256px'}" />
            <a-button type="primary" style="margin-left:16px;margin-right: 15px" @click="searchData(3)">查询</a-button>
          </div>-->
          <a-tab-pane loading="true" tab="按设备统计" key="1">
            <a-row>
              <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
                <!--<bar :data="barData" :scale="scale" title="变化曲线" />-->
                <div :style="{ padding: '0 10px 32px 32px' }">
                  <h4 :style="{ marginBottom: '20px' }">按设备统计</h4>
                  <v-chart :forceFit="true" :height="height" :data="barData" :scale="scale" :padding="['auto', '50', '80', '100']">
                    <v-tooltip />
                    <v-legend />
                    <v-axis />
                    <!--<v-bar position="targetName*num" color="name" :adjust="adjust"/>-->
                    <v-bar position="targetName*fee" color="name" :adjust="adjust"/>
                    <v-bar position="targetName*minutes" color="name" :adjust="adjust"/>、
                  </v-chart>
                </div>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>

  </div>
</template>

<script>
import { ChartCard, MiniArea, MiniBar, MiniProgress, RankList, Bar, Trend, NumberInfo, MiniSmoothArea } from '@/components'
import { mixinDevice } from '@/utils/mixin'
import { statisticsResultSbGroupBySbMonth } from '@/api/repair/form'
import BaseTool from '@/utils/tool'

export default {
  name: 'Analysis',
  mixins: [mixinDevice],
  components: {
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    NumberInfo,
    MiniSmoothArea
  },
  data () {
    return {
      weekSearchFlag: false,
      monthSearchFlag: false,
      dateRange: [],
      loading: true,
      height: 400,
      legendCustom: true,
      legendAllowAllCanceled: true,
      axisGrid: null,
      axisLabel: {
        textStyle: {
          fill: '#fdae6b'
        }
      },
      adjust: [{
        type: 'dodge',
        marginRatio: 1 / 32
      }],
      gemoSize: 3,
      scale: [{
        dataKey: 'num',
        min: 0,
        formatter: function formatter (text) {
          return text
        }
      }, {
        dataKey: 'fee',
        min: 0,
        formatter: function formatter (text) {
          return text + '万'
        }
      }, {
        dataKey: 'minutes',
        min: 0,
        formatter: function formatter (text) {
          return BaseTool.Number.div(text, 60, 2) + '小时'
        }
      }],
      // 搜索用户数

      barData: [],

      pieStyle: {
        stroke: '#fff',
        lineWidth: 1
      },
      year: parseInt(this.BaseTool.Moment().format(this.BaseTool.Date.PICKER_NORM_YEAR)),
      month: parseInt(this.BaseTool.Moment().format(this.BaseTool.Date.PICKER_NORM_MONTH)),
      startYear: parseInt(this.BaseTool.Moment().format(this.BaseTool.Date.PICKER_NORM_YEAR)),
      endYear: parseInt(this.BaseTool.Moment().format(this.BaseTool.Date.PICKER_NORM_YEAR))
    }
  },
  computed: {
  },
  created () {
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)

    this.init()
  },
  methods: {
    searchData (type, e) {
      this.weekSearchFlag = false
      this.monthSearchFlag = false
      if (type === 1) {
        this.dateRange = []
        this.weekSearchFlag = true
      }
      if (type === 2) {
        this.dateRange = []
        this.monthSearchFlag = true
      }
      if (type === 3) {
        if (this.BaseTool.Object.isBlank(this.dateRange) || this.dateRange.length < 2) {
          this.$message.error('请输入筛选时间')
          return
        }
        const startDate = this.dateRange[0]
        const endDate = this.dateRange[1]
        if (this.BaseTool.Object.isBlank(startDate) || this.BaseTool.Object.isBlank(endDate)) {
          this.$message.error('请输入筛选时间')
          return
        }
        const diffDays = endDate.diff(startDate, 'days') + 1
        if (diffDays > 31) {
          this.$message.error('搜索时间最大不能超过31天')
        }
      }
      // e.toElement.innerHTML = '<span>11</span>'
    },
    init () {
      statisticsResultSbGroupBySbMonth({ year: this.year, month: this.month }).then(res => {
        console.log(33, res)
        const barData = []
        res.data.forEach(item => {
          barData.push({
            name: '维修次数',
            targetName: item.sbName,
            num: item.num
          })
          barData.push({
            name: '维修费用(元)',
            targetName: item.sbName,
            fee: item.fee
          })
          barData.push({
            name: '维修工时(小时)',
            targetName: item.sbName,
            minutes: item.minutes
          })
        })
        this.barData = barData
      })
    }
  }

}
</script>

<style lang="less" scoped>
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  .antd-pro-pages-dashboard-analysis-twoColLayout {
    position: relative;
    display: flex;
    display: block;
    flex-flow: row wrap;
  }

  .antd-pro-pages-dashboard-analysis-salesCard {
    height: calc(100% - 24px);
    /deep/ .ant-card-head {
      position: relative;
    }
  }

  .dashboard-analysis-iconGroup {
    i {
      margin-left: 16px;
      color: rgba(0,0,0,.45);
      cursor: pointer;
      transition: color .32s;
      color: black;
    }
  }
  .analysis-salesTypeRadio {
    position: absolute;
    right: 54px;
    bottom: 12px;
  }
</style>
